<!--
 * @Author: hq
 * @Date: 2022-06-02 14:27:01
 * @LastEditors: hq
 * @LastEditTime: 2022-06-30 17:40:28
 * @Description: your project
 * @version: 1.0
-->
<template>
  <div class="detail">
    <div class="title">
      <div class="ti">基本信息</div>
      <div class="row">
        <div class="col">
          <div>店铺名：</div>
          <div>{{ rowData.name }}</div>
        </div>
        <div class="col">
          <div>地址：</div>
          <div>{{ rowData.location }}</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div>店铺logo：</div>
          <el-image
            v-if="rowData.logo"
            style="width: 100px; height: 100px"
            :src="rowData.logo.src"
            :preview-src-list="logoArr"
          >
          </el-image>
        </div>
        <div class="col">
          <div>服务电话：</div>
          <div>{{ rowData.tel }}</div>
        </div>
      </div>

      <div class="row">
        <!-- <div class="col">
          <div>销量：</div>
          <div>{{ rowData.name }}</div>
        </div> -->
        <div class="col">
          <div>星级：</div>
          <div>{{ rowData.star }}</div>
        </div>
        <div class="col">
          <div>电商：</div>
          <div>{{ rowData.is_online }}</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div>地区：</div>
          <div>{{ rowData.province }}</div>
        </div>
        <div class="col">
          <div>营业时间：</div>
          <div>{{ rowData.busy_start }} - {{ rowData.busy_end }}</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div>店铺类型：</div>
          <div v-if="rowData.type === 1">厂商</div>
          <div v-if="rowData.type === 2">品牌商</div>
          <div v-if="rowData.type === 3">经销商</div>
          <div v-if="rowData.type === 4">个体户</div>
        </div>
        <div class="col">
          <div>认证状态：</div>
          <div v-if="rowData.auth === 0">未认证</div>
          <div v-if="rowData.auth === 1">已认证</div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="l">
        <div class="title">
          <div class="ti">门头照</div>
          <div class="tu" v-if="rowData.banner">
            <div
              class="image"
              v-for="(item, index) in rowData.banner"
              :key="index"
            >
              <el-image
                style="width: 100px; height: 100px"
                :src="item.src"
                :preview-src-list="shopImgArr"
              >
              </el-image>
            </div>
          </div>
        </div>
      </div>
      <div class="r">
        <Map @updateLocation="updateLocation"></Map>
      </div>
    </div>
  </div>
</template>

<script>
import Map from "@/components/map.vue";
import { storeDetail } from "@/api/merchant";
export default {
  props: ["rowId"],
  components: { Map },
  data() {
    return {
      shopImgArr: [],
      rowData: {},
      logoArr: [],
    };
  },
  methods: {
    async storeDetail() {
      const { data, err } = await storeDetail({
        id: this.rowId,
      });
      if (err === 0) {
        // (data);
        this.rowData = data;
        this.logoArr.push(data.logo.src);
        // (this.rowData);
        this.shopImgArr = this.rowData.banner.map((item) => {
          return item.src;
        });
        // (this.shopImgArr);
      }
    },
    updateLocation(Addr) {
      //   ("位置信息：", Addr);
    },
  },
  created() {
    this.storeDetail();
  },
};
</script>

<style lang="scss" scoped>
.detail {
  font-size: 13px;
  .ti {
    font-weight: bold;
    margin-bottom: 20px;
  }
  .row {
    display: flex;
    padding: 0 0 20px 20px;
    box-sizing: border-box;

    .col {
      width: 50%;
      display: flex;
      align-items: center;
      div:nth-child(1) {
        flex-shrink: 0;
      }
    }
  }
  .tu {
    display: flex;
    flex-wrap: wrap;
    padding-left: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
    .image {
      margin-right: 20px;
      text-align: center;
    }
  }
  .content {
    display: flex;
    .l {
      width: 40%;
    }
    .r {
      width: 60%;
      height: 500px;
    }
  }
}
</style>
